<template>
  <div class="MapView">
      <div id="main"></div>
  </div>
</template>
<script>
import ChinaJson from  "@/api/china.json"
export default{
  name:'MapView',
  data(){
    return{
    }
  },
  mounted(){
      let myChart = this.echarts.init(document.querySelector('#main'))
      this.echarts.registerMap('china',ChinaJson) // 注册可用的地图 必须包含 geo 组件或者map图表类型 的时候才可用使用
      console.log('ChinaJson',ChinaJson);
      let option = {
          backgroundColor:'rgba(121,145,209)',
          geo:{
             map:'china',
             aspectScale:0.75, // 地图的长宽比
             zoom:1.1,
             itemStyle:{
                 normal:{
                    areaColor:{
                       type:'radial',
                       x:0.5,
                       y:0.5,
                       r:0.8,
                       colorStops:[
                          {
                            offset:0,
                            color:'#09132c'  //  0%处的颜色
                          },
                          {
                            offset:1,
                            color:'#274d68'  //  100%处的颜色
                          },
                       ],
                       globalCoord:true,
                    },
                    shadowColor:'rgb(58,115,192)',
                    shadowOffsetX:10,
                    shadowOffsetY:11,
                 }
             },
             regions:[{
               name:'南海诸岛',
               itemStyle:{
                   opacity:0.6
               }
             }]
          },
          series:[
             {  // 配置地图相关参数 绘制地图 这个对象是关于地图图表的相关设置
                type:'map',
                label:{
                   normal:{
                      show:true,   // 默认显示文字
                      textStyle:{
                        color:'#1de9b6'
                      }
                   },
                   emphasis:{
                      textStyle:{
                        color:'rgba(183,185,14)'
                      }
                   }
                },
                zoom:1.1,
                map:'china',
                itemStyle:{
                  normal:{
                    backgroundColor:'rgba(147,235,248)',
                    borderWidth:1,
                    areaColor:{
                       type:'radial',
                       x:0.5,
                       y:0.5,
                       r:0.8,
                       colorStops:[
                          {
                            offset:0,
                            color:'rgba(31,54,150)'  //  0%处的颜色
                          },
                          {
                            offset:1,
                            color:'rgba(89,128,142)'  //  100%处的颜色
                          },
                       ],
                       globalCoord:true,
                    },
                  },
                  emphasis:{
                     areaColor:'rgba(46,229,206)',
                     borderWidth:0.1,
                  }
               },
             } 
          ]
      }
      myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>

.MapView{
      width:100%;
   #main{
      width:100%;
      height:600px;
   }
}


</style>